{"componentChunkName":"component---src-templates-blog-post-js","path":"/base64/Base64 编码的简单尝试/","result":{"data":{"site":{"siteMetadata":{"title":"😏","author":"thoamsy"}},"markdownRemark":{"id":"0753acb2-5aca-54e9-968c-023ae49c9ab8","html":"

这几天不务正业, 在看 HTTP 以及 express 的服务端应用. 关于认证就有很多技巧. 什么基本认证, 记号认证, Passport 认证. 虽然其它认证都是通过 md5 或者 UUID 来实现一种不可逆且唯一的识别码. 换句话说, 我也不会实现这些东西.\n不过, Base64 虽然作为最基本的操作, 安全性基本没有(因为是对称的),所以可以作为一个很好的练练手的代码.

\n

Base64

\n

Base64 的基本思路就是, 3/4. 每三个字节为一组, 将 24 bits 分为 4 份, 每份 6bits. 然后在一个大小为 64 的索引表中找到对应的字符.\n针对不能整除 3 的情况, 就将补 0. 之后这些 0 使用 = 来填充. 但是在实现中, 索引表中的第 0 个是 A, 所以如果我们要提前填充的话, 就要去掉多余的字符. 但是在 JS 中, 如果数组不存在某个下标, 会返回 undefined, 而对 undefined 进行操作会得到 0. 所以, 我们就不需要提前填充.

\n

实现

\n

作为一个合格的程序员, 当然不能傻逼到自己去一个个写索引表, 其实复制粘贴很快! 所以我就用 map 函数来生成这些. 代码很简单

\n
let temp = Array(64).fill(0)\nlet index = String.fromCharCode(\n  ...temp.map((_, idx) => {\n    if (0 <= idx && idx < 26) {\n      return 0x41 + idx\n    } else if (idx >= 26 && idx < 52) {\n      return 0x61 + idx - 26\n    } else if (idx >= 52 && idx < 62) {\n      return 0x30 + idx - 52\n    } else {\n      return idx === 62 ? 43 : 47\n    }\n  })\n)
\n

接下来就是关于 3 / 4 的具体操作咯. 其实很好理解, 每 6 个一份, 通过位操作就能将每个部分分离出来.\n当然, 因为 JS 中的数字都是 4 个字节起步的, 所以有点浪费内存, 应该使用 Uint8Array 来减少内存的消耗.

\n
let first = data[0] >> 2\nlet two = ((data[0] & 0x3) << 4) | (data[1] >> 4)\nlet three = ((data[1] & 0xf) << 2) | (data[2] >> 6)\nlet four = data[2] & 0x3f\n\nreturn `${index[first]}${index[two]}${index[three]}${index[four]}`
\n

代码很简单, 就像上面一样. 不过需要注意的就是优先级问题. 位移动操作在大多数语言中, 优先级都是高于其它的位操作, 低于 + - 运算. 除了 Swift. 所以这里的 () 主要还是避免歧义.

\n

好了, 轮子都找好了, 剩下的就是修车咯!

\n
function encode(data) {\n  // 将 data 转化成 Uint8Array 转成能接受的值\n  let transfer = new Uint8Array([...data].map(c => c.charCodeAt(0)))\n\n  let base64 = []\n  let startPoint\n\n  for (startPoint = 0; startPoint < data.length; startPoint += 3) {\n    base64.push(...threeToFour(transfer.slice(startPoint, startPoint + 3)))\n  }\n\n  // 因为 threeFour 会假设传入的就是 3 个字节, 但是如果不是 3 个的话, 就会出现问题.\n  // 比如 data[2] 就会是 undefined. 对 undefined 进行位操作会被当成 0, 所以多出来的字母肯定会有一个 0.\n  // 再根据 Base64 的规则, 加上相应的等号\n  if (startPoint - data.length === 1) {\n    // 说明 % 3 余 2, 简单的算一下就知道咯.\n    base64.pop()\n    base64.push('=')\n  } else if (startPoint - data.length === 2) {\n    base64.pop()\n    base64.pop()\n    base64.push('==')\n  }\n  return base64.join('')\n}
\n

需要注意的是那个循环. 所以我们知道要分辨能不能整除 3. 但是, 仔细想一下, 我用 3, 4, 5 作为 🌰 的话, 就能看出来.\n3 的时候, 从 0 开始, 最后跳出循环的 startPoint 就等于 3. 所以没有任何需要另外处理的情况.\n4 的时候, 就会在 6 结束, 这个时候 6 - 4 等于 2, 所以需要补两个字节. 但是因为我的 threeToFour 函数没有专门处理这种情况, 最后总会返回 4 个字符, 所以我们需要将多出来的字节替换成 =. 当然, 你也可以使用 splice 做到一次完成这种操作.\n5 的时候和上面相似.

\n

最后这就是整个代码的实现咯. 不得不说, 对于那种需要频繁增加减少的操作, 我还是喜欢用数组, 然后 join 起来. 不过, 浏览器对于 += 运算符应该是做了大量的优化的, 所以到底哪个性能高, 我还真的不确定……

\n

**Update: ** 现代浏览器针对 += 有客观的优化，虽然还有一些细节上的区分，不过基本上不超过几百万字节的话，+= 是更快的。但是因为这里还需要修改最后的字符串，需要再复制一下，这个可能会带来不必要的性能损耗。

\n

总结

\n

这种题目整个做出来, 对于自己的思维还是很有锻炼的. 虽然, 不可能一次就能编对, 特别是那个位操作的一段很容易出现问题, 这个时候一定要保持冷静才行.

","frontmatter":{"title":"Base64 编码的简单尝试","spoiler":null,"image":null,"date":"2018/01/03"}}},"pageContext":{"slug":"/base64/Base64 编码的简单尝试/","previous":{"fields":{"slug":"/hello-world/"},"frontmatter":{"title":"Hello World","image":null,"spoiler":"第一篇博客 hhh"}},"next":{"fields":{"slug":"/uuid/UUID/"},"frontmatter":{"title":"UUID","image":null,"spoiler":null}}}}}